<template>
  <div ref="contentContainer" class="content-container">
    
  
      
      	<!-- 搜索栏 -->
      	<div ref="contentSearch" class="content-search-wrap">
	      	<el-row class="content-search" :gutter="20">
	      		<el-form label-width="80px" :model="search">

				  	<el-col :span="12">
				  		
				  		<el-form-item label="内容状态">
				  			
				  			<div>
				  				<span class="status-item" v-for="(item,index) in articleStatus" :class="{'current':item.current}" :key="index" @click="statusItemClick(index,item)">{{item.label}}</span>
				  			</div>

				  		</el-form-item>

				  	</el-col>

				  	<el-col :span="12">
				  		<el-form-item>
					  		<el-input
							    placeholder="请输入标题关键字"
							    v-model="search.keywords">
							    <i slot="prefix" class="el-input__icon el-icon-search" @click="keyWordsSearch"></i>
							</el-input>
						</el-form-item>	
				  	</el-col>

				  	<el-col :span="12">
				  		<el-form-item label="时间选择">
				  			
				  			<el-date-picker
						      	v-model="search.date"
						      	type="daterange"
						      	align="right"
						      	unlink-panels
						      	range-separator="-"
						      	start-placeholder="开始日期"
						      	end-placeholder="结束日期"
						      	format="yyyy-MM-dd"
							  	value-format="yyyy-MM-dd"
						      	:picker-options="pickerOptions"
						      	@change="searchDateChange"
						      	>
						    </el-date-picker>

				  		</el-form-item>
				  	</el-col>

				  	<el-col :span="12">
				  		<el-form-item>
				  			
				  			<el-button class="publish-btn" type="primary" @click="goPublish">马上发表</el-button>

				  		</el-form-item>
				  	</el-col>
			  	</el-form>

			</el-row>
      	</div>

      	<!-- 表格展示栏 -->
      	<div ref="contentMain" class="content-main-wrap">
      		
      		<el-table
      			size="mini"
      			:data="articleData"
      			:height="tableHeight"
      			:header-cell-style="headerStyleObj"
      		>
      			<el-table-column
			      prop="title"
			      label="图文名称"
			    >
			    	<template slot-scope="scope">
			    		<div class="table-cell-graphic" @click="skipContentDetail(scope.row)">
			    			<img class="graphic-img" :src="convertImg(scope.row.converIds)">
			    			<div class="graphic-text">
			    				<p class="title">{{scope.row.title}}</p>
			    				<p class="price">￥{{scope.row.goodsPrice}}</p>
			    			</div>
			    		</div>
			    	</template>

			    </el-table-column>

			    <el-table-column
			      prop="subscribe"
			      label="订阅量"
			      width="100">
			    </el-table-column>

			    <el-table-column
			      prop="status"
			      label="内容状态"
			      width="100">


			      	<template slot-scope="scope">
			    		<div class="table-cell-status" v-html="setArticleStatus(scope.row.status)"></div>
			    	</template>

			    </el-table-column>

			    <el-table-column
			      prop="publishTime"
			      label="发表时间"
			      width="160">
			    </el-table-column>

			    <el-table-column
			      prop="publishStatus"
			      label="发布状态"
			      width="100">
			    </el-table-column>


			    <el-table-column
      				fixed="right"
      				label="操作"
      				width="180">
      				<template slot-scope="scope">
        				<el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
        				<el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
        				<el-button @click="handleDRecall(scope.row)" type="text" size="small">撤回</el-button>
        				<el-button @click="handleShare(scope.row)" type="text" size="small">分享</el-button>
        				
      				</template>
    			</el-table-column>


    			<div class="empty" slot="empty">
    				<div class="empty-img"></div>
    				<div class="empty-tip">没有符合条件的内容</div>
    			</div>
      		</el-table>

      		<!-- 分页 -->
		    <div ref="pagination" class="content-pagination-wrap">
		    	<el-pagination
		    		small
		    		background
		    		class="articleListPagination"
			      	:current-page.sync="page.currentPage"
			      	:page-sizes="pageSizes"
			      	:page-size="page.pageSize"
			      	layout="prev, pager, next"
			      	:total="page.total"
			      	@current-change="pageChange"
			    >
			    </el-pagination>
		    </div>
      	</div>


      	    

    
  </div>

</template>

<script>
import { getList, del } from "@/api/substance/list"
import { baseUrl } from '@/config/env';
//获取图片的url
const imgPrefix = baseUrl+'/rest/common/preview/';

export default {
    
    data() {
        return {
        	//默认列表缩略图
        	defalutThum:"http://hbimg.b0.upaiyun.com/bdaca9a07e1a8947c00c2f826ebf848750927aa24963-cATwbg_fw658",
        	tableHeight:null,
        	headerStyleObj:{
        		"backgroundColor":"#f6f8fa",
        		"fontWeight":400
        	},
        	search:{
        		status:'',
        		keywords:'',
        		date:['','']
        	},
           	articleStatus:[
           		{label:'全部',value:'',current:true},
           		{label:'已发表',value:'1',current:false},
           		{label:'未通过',value:'2',current:false},
           		{label:'草稿',value:'3',current:false},
           		{label:'已撤回',value:'4',current:false},
           		{label:'定时发布',value:'5',current:false},
           	],
           	page: {
	        	pageSize: 10,
	        	currentPage: 1,
	        	total: 0
	      	},
	      	pageSizes:[10,20,30,40,50,100],
           	pickerOptions: {
          		shortcuts: [{
            		text: '最近一周',
            		onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
            		}
          		}, {
		            text: '最近一个月',
		            onClick(picker) {
		              	const end = new Date();
		              	const start = new Date();
		              	start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              	picker.$emit('pick', [start, end]);
		            }
		        }, {
		            text: '最近三个月',
		            onClick(picker) {
		              	const end = new Date();
		              	const start = new Date();
		              	start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              	picker.$emit('pick', [start, end]);
		            }
          		}]
        	},
        	articleData:[],

        }
    },
    created(){

    },
    mounted(){

     	//获取文章列表
     	this.getList();
    },
    methods: {
    	
    	headerStyle(row,rowIndex){
    		console.log("-------设置表头---------")
    		console.log(row)
    		console.log(rowIndex)
    	},
    	//搜索状态点击
    	statusItemClick(index,item){
    		for(var i=0;i<this.articleStatus.length;i++){
    			if(i == index){
    				this.articleStatus[i].current = true

    			}else{
    				this.articleStatus[i].current = false
    			}
    		}

    		this.search.status = item.value;

    		this.getList();
    	},
    	//搜索日期改变
    	searchDateChange(val){
    		console.log("---------时间改变------------")
    		console.log(val)
    		if(val == null){
    			this.search.date = ['',''];
    		}
    		this.getList()
    	},
    	//文章标题关键词搜索
    	keyWordsSearch(){
    		this.getList()
    	},
    	//获取文章列表
    	getList(){
    		getList(this.page.currentPage,this.page.pageSize,this.search.status,this.search.date[0],this.search.date[1],this.search.keywords).then((res)=>{
    			console.log("--------文章列表--------------")
    			console.log(res)
    			var result = res.data.data;
    			this.page.total = result.total;
    			this.articleData = result.records;
    		})
    	},
    	//转换表格图片地址
    	convertImg(converIds){
    		if(!converIds){
    			return this.defalutThum;
    		}else{
    			return imgPrefix+converIds.split(",")[0];
    		}
    	},
        //编辑
        handleEdit(row){
        	//跳转到文章添加编辑页面
        	this.$router.push({
        		path:'/substance/publish',
        		query:{
        			articleId:row.id
        		}
        	})
        },
        //删除
        handleDel(row){

        	this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
	          	confirmButtonText: '确定',
	          	cancelButtonText: '取消',
	          	type: 'warning'
	        }).then(()=>{
	        	return del(row.id);
	        }).then((res) => {

	        	this.getList();
	          	this.$message({
	            	type: 'success',
	            	message: '删除成功!'
	          	});
	        }).catch(() => {
	          	this.$message({
	            	type: 'info',
	            	message: '已取消删除'
	          	});          
	        });


        	
        },
        //撤回
        handleDRecall(){

        },
        //分享
        handleShare(){

        },
        //设置文章内容状态
        setArticleStatus(status){
        	//1发布  2未通过 3草稿 4已撤回 5定时发布
        	if(status == 1){
        		return "<i class='icon iconfont ipc-dot' style='font-size:6px;margin-right:6px;color:#33cc33;'></i><span style='color:#666;'>已发布</span>"
        	}

        	if(status == 2){
        		return "<i class='icon iconfont ipc-dot' style='font-size:6px;margin-right:8px;color:#aa2116;'></i><span style='color:#666;'>未通过</span>"
        	}

        	if(status == 3){
        		return "<i class='icon iconfont ipc-dot' style='font-size:6px;margin-right:8px;color:#cc9933;'></i><span style='color:#666;'>草稿</span>"
        	}

        	if(status == 4){
        		return "<i class='icon iconfont ipc-dot' style='font-size:6px;margin-right:8px;color:#a1a3a6;'></i><span style='color:#666;'>已撤回</span>"
        	}

        	if(status == 5){
        		return "<i class='icon iconfont ipc-dot' style='font-size:6px;margin-right:8px;color:#ff9900;'><i><span style='color:#666;'>定时发布</span>"
        	}
        },
        pageChange(val){

        	this.getList()
        },
        goPublish(){
        	this.$router.push({
        		path:'/substance/publish'
        	})
        },
        //跳转到前端详情页
        skipContentDetail(row){
          //添加面包屑
          this.$store.dispatch('setLevel',{level:0,data:{name:'首页',url:'/content/index'}});
          this.$store.dispatch('setLevel',{level:1,data:{name:row.categoryName,url:`/content/index?cateId=${row.categoryId}`}});


          const { href } = this.$router.resolve({
            path:`/content/detail/${row.id}`,
            query:{
              cateId:row.categoryId
            }
          })
          
          window.open(href,"_blank");

          
        }
    },
    computed: {
        
    }
}
</script>

<style>
.content-search-wrap .el-form-item{
	margin: 5px 0;
}

.content-search .el-range-separator{
	width:25px;
}

.publish-btn{
	background-color: #ff8406;
    border-color: #ff8406;
}
.publish-btn:focus,.publish-btn:hover{
	background-color: #ff8c16;
    border-color: #ff8c16;
}

</style>


<style scoped>
.content-search-wrap{
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

.content-search{
	margin-left: 0!important;
	margin-right: 0!important;
	padding: 20px 10px;
}

.status-item{
	color:#333333;
	margin-right: 15px;
	cursor: pointer;
}

.status-item.current{
	color:#FF8406;
}



.content-main-wrap{
	background-color: #FFFFFF;
	padding: 20px;
}

.content-pagination-wrap{
	overflow: hidden;
	margin-top: 10px;
}
.articleListPagination{
	float: right;
}

/*自定义图文名称*/
.table-cell-graphic{
	display: flex;
	flex-direction: row;
  cursor: pointer;
}

.table-cell-graphic .graphic-img{
	width: 60px;
	height: 50px;
	margin-right: 5px;
}

.table-cell-graphic .graphic-text>p{
	margin-top: 0;
	margin-bottom: 5px;
}

.table-cell-graphic .graphic-text .price{
	color:#FF8406; 
}

.empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 400px;
    width: 100%;
}

.empty .empty-img{
	margin-top: 100px;
	background-size: 160px 160px;
    height: 160px;
    width: 160px;
	background-image: url();
}
</style>



<style lang="scss" scoped>
.content {
  &-container {
    height: 100%;
    background-color: #E8ECF0;
  }
  
}
</style>

